<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
    <link href="//vjs.zencdn.net/7.8.2/video-js.min.css" rel="stylesheet">
    <script src="//vjs.zencdn.net/7.8.2/video.min.js"></script>
    <link href="index.css" rel="stylesheet">
    <title>海康视频sdk代理</title>
</head>
<body>
<nav class="navbar navbar-dark bg-dark">
    <a class="navbar-brand" href="#">海康视频sdk调用代理</a>
    <div class="link-bar">
        <a href="https://open.hikvision.com/docs/8530061f19534a9993e2afeb70e7c96a" target="_blank">海康SDK文档</a>
    </div>
</nav>

<div class="video-container">
    <div class="row">
        <div class="col">
            <form id="videoForm">
                <fieldset class="form-group">
                    <legend class="form-legend">监控视频</legend>
                    <div class="row">
                        <label id="txtVideoUrl" class="col-form-label col-sm-3">视频地址</label>
                        <div class="col-sm-7">
                            <input id="txtVideoUrl1" class="form-control" type="text" placeholder="请输入视频地址"
                                   required>
                            <input id="txtVideoUrl2" class="form-control" type="text" placeholder="请输入视频地址"
                                   >
                            <input id="txtVideoUrl3" class="form-control" type="text" placeholder="请输入视频地址"
                                   >
                            <input id="txtVideoUrl4" class="form-control" type="text" placeholder="请输入视频地址"
                                   >
                            <input id="txtVideoUrl5" class="form-control" type="text" placeholder="请输入视频地址"
                                   >
                            <input id="txtVideoUrl6" class="form-control" type="text" placeholder="请输入视频地址"
                                   >
                            <input id="txtVideoUrl7" class="form-control" type="text" placeholder="请输入视频地址"
                                   >
                            <input id="txtVideoUrl8" class="form-control" type="text" placeholder="请输入视频地址"
                                   >
                            <input id="txtVideoUrl9" class="form-control" type="text" placeholder="请输入视频地址"
                                   >
                        </div>
                        <div class="col-sm-2">
                            <button type="button" class="btn btn-primary" id="btnVideo">确定</button>
                        </div>
                    </div>
                    <div class="row">
                        <div class="span4">
                            <video id="videoPlayer1" class="video-js" controls preload="auto" width="520" height="330"
                                    data-setup="{}" >
                                <p class="vjs-no-js">
                                    To view this video please enable JavaScript, and consider upgrading to a
                                    web browser that <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
                                </p>
                            </video>
                        </div>
                        <div class="span4">
                            <video id="videoPlayer2" class="video-js" controls preload="auto" width="520" height="330"
                                   data-setup="{}" >
                                <p class="vjs-no-js">
                                    To view this video please enable JavaScript, and consider upgrading to a
                                    web browser that <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
                                </p>
                            </video>
                        </div>
                        <div class="span4">
                            <video id="videoPlayer3" class="video-js" controls preload="auto" width="520" height="330"
                                   data-setup="{}" >
                                <p class="vjs-no-js">
                                    To view this video please enable JavaScript, and consider upgrading to a
                                    web browser that <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
                                </p>
                            </video>
                        </div>
                    </div>
                    <div class="row">
                        <div class="span4">
                            <video id="videoPlayer4" class="video-js" controls preload="auto" width="520" height="330"
                                   data-setup="{}" >
                                <p class="vjs-no-js">
                                    To view this video please enable JavaScript, and consider upgrading to a
                                    web browser that <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
                                </p>
                            </video>
                        </div>
                        <div class="span4">
                            <video id="videoPlayer5" class="video-js" controls preload="auto" width="520" height="330"
                                   data-setup="{}" >
                                <p class="vjs-no-js">
                                    To view this video please enable JavaScript, and consider upgrading to a
                                    web browser that <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
                                </p>
                            </video>
                        </div>
                        <div class="span4">
                            <video id="videoPlayer6" class="video-js" controls preload="auto" width="520" height="330"
                                   data-setup="{}" >
                                <p class="vjs-no-js">
                                    To view this video please enable JavaScript, and consider upgrading to a
                                    web browser that <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
                                </p>
                            </video>
                        </div>
                    </div>
                    <div class="row">
                        <div class="span4">
                            <video id="videoPlayer7" class="video-js" controls preload="auto" width="520" height="330"
                                   data-setup="{}" >
                                <p class="vjs-no-js">
                                    To view this video please enable JavaScript, and consider upgrading to a
                                    web browser that <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
                                </p>
                            </video>
                        </div>
                        <div class="span4">
                            <video id="videoPlayer8" class="video-js" controls preload="auto" width="520" height="330"
                                   data-setup="{}" >
                                <p class="vjs-no-js">
                                    To view this video please enable JavaScript, and consider upgrading to a
                                    web browser that <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
                                </p>
                            </video>
                        </div>
                        <div class="span4">
                            <video id="videoPlayer9" class="video-js" controls preload="auto" width="520" height="330"
                                   data-setup="{}" >
                                <p class="vjs-no-js">
                                    To view this video please enable JavaScript, and consider upgrading to a
                                    web browser that <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
                                </p>
                            </video>
                        </div>
                    </div>
                </fieldset>
            </form>
        </div>
    </div>
</div>


<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>

<script>
    $(function () {
        // start video
        $('#btnVideo').on('click', function () {
            let videoUrl1 = $('#txtVideoUrl1').val();
            let videoUrl2 = $('#txtVideoUrl2').val();
            let videoUrl3 = $('#txtVideoUrl3').val();
            let videoUrl4 = $('#txtVideoUrl4').val();
            let videoUrl5 = $('#txtVideoUrl5').val();
            let videoUrl6 = $('#txtVideoUrl6').val();
            let videoUrl7 = $('#txtVideoUrl7').val();
            let videoUrl8 = $('#txtVideoUrl8').val();
            let videoUrl9 = $('#txtVideoUrl9').val();
            const form = document.getElementById('videoForm');
            if (form.checkValidity() === true) {
                form.classList.remove('was-validated');

                let video1 = window.videojs('videoPlayer1');
                video1.reset();
                video1.src({src: videoUrl1, type: 'application/x-mpegURL'})
                video1.play();

                let video2 = window.videojs('videoPlayer2');
                video2.reset();
                video2.src({src: videoUrl2, type: 'application/x-mpegURL'})
                video2.play();

                let video3 = window.videojs('videoPlayer3');
                video3.reset();
                video3.src({src: videoUrl3, type: 'application/x-mpegURL'})
                video3.play();

                let video4 = window.videojs('videoPlayer4');
                video4.reset();
                video4.src({src: videoUrl4, type: 'application/x-mpegURL'})
                video4.play();

                let video5 = window.videojs('videoPlayer5');
                video5.reset();
                video5.src({src: videoUrl5, type: 'application/x-mpegURL'})
                video5.play();

                let video6 = window.videojs('videoPlayer6');
                video6.reset();
                video6.src({src: videoUrl6, type: 'application/x-mpegURL'})
                video6.play();

                let video7 = window.videojs('videoPlayer7');
                video7.reset();
                video7.src({src: videoUrl7, type: 'application/x-mpegURL'})
                video7.play();

                let video8 = window.videojs('videoPlayer8');
                video8.reset();
                video8.src({src: videoUrl8, type: 'application/x-mpegURL'})
                video8.play();

                let video9 = window.videojs('videoPlayer9');
                video9.reset();
                video9.src({src: videoUrl9, type: 'application/x-mpegURL'})
                video9.play();

            } else {
                form.classList.add('was-validated');
            }
        });
    });

</script>
</body>
</html>